<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="运动框架.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			div.one{
				width: 400px;
				height: 400px;
				border: 1px solid;
				margin: 0px auto;
				position: relative;
			}
			div.one>ul{
				margin: 0px;
				padding: 0px;
				list-style: none;
				width: 2000px;
				height: auto;
				position:absolute;
				left: 0px;
			}
			div.one>ul>li{
				margin: 0px;
				padding: 0px;
				float: left;
				width: 400px;
				height: 400px;
				
			}
			img{
				width: 100%;
				height: 100%;
			}
			.two{
				position: relative;
				left:720px;
				top: -40px;
			}
			.two li{
				text-align: center;
				width: 20px;
				height: 20px;
				border-radius:20px;
				background-color:red ;
				display: inline-block;
				margin-left:30px ;
				list-style: none;
			}
			.two>div{
				
				position: relative;
			}
			.two li:nth-child(4){
				position: absolute;
				top: -50px;
			}
			.color{
				color: white;
				position: relative;
				z-index: 1;
			}
		</style>
		<script type="text/javascript">
			var oul_two;
			var oul_one;
			var now =0;
			function tab(){
				for (var i=0;i<$('#oul_one>li').length;i++) {
					oul_two[i].className='';
				}
					oul_two[now].className='color';
					move(oul_one,{left:-400*now});
			}
		
			function next(){
				now++;
				now=now%8;
				tab();
			}
			window.onload=function(){
			console.log($('.two>li'))
			oul_one =document.getElementById('oul_one');
			oul_two =document.getElementById('two').getElementsByTagName('li');
			oul_tw =document.getElementById('two');
			oul_tw.innerHTML=oul_tw.innerHTML+oul_tw.innerHTML;
			oul_one.innerHTML=oul_one.innerHTML+oul_one.innerHTML;
			oul_one.style.width=$('#oul_one>li').length*2*400+'px';
				console.log(oul_two);
				for(var i=0;i<$('#oul_one>li').length;i++){
					oul_two[i].index=i;
					oul_two[i].onclick =function(){
						console.log('11');
						now=this.index;
						tab();
					}
					
				}
				setInterval(next,1000);
				
			}
		</script>
	</head>
	<body>
		<div class="one">
			<ul id="oul_one">
				<li><img src="Bootstrap 3.3.5（环境）2.19-3.20/img/lunbo1.jpg"/></li>
				<li><img src="Bootstrap 3.3.5（环境）2.19-3.20/img/sharpen,100.jpg"/></li>
				<li><img src="js-demo/JS运动中级/记录/幻灯片——上下滑动/images/3.jpg"/></li>
				<li><img src="js-demo/JS运动中级/记录/幻灯片——上下滑动/images/5.jpg"/></li>
			</ul>
		</div>
		<div class="">
			<ul class="two" id="two">
				<div class="">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				</div>
			</ul>
		</div>
	</body>
</html>
